<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="20">
        <!--搜索区域-->
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item>
            <a-input v-model="queryVo.name" style="height: 40px;width: 300px" placeholder="请输入资源名称 ">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button style="margin-right: 20px" type="primary" html-type="submit">
              搜索
            </a-button>
            <a-button type="primary" @click="resetSearch" html-type="submit">
              置空
            </a-button>
          </a-form-item>
        </a-form>
        <a-form layout="inline" :form="form" @submit="handleSubmit">
          <a-form-item>
            <a-card>
              <a-card-grid v-model="queryVo.cateId" @click="searchBook(item.id)" v-for="(item,index) in data" :key="index"
                           style="width:auto;height:25px;text-align:center;">
                {{ item.name }}
              </a-card-grid>
            </a-card>

          </a-form-item>
        </a-form>
        <br>

        <div>
          <a-card hoverable style="width: 300px;display: inline-grid;margin:0 50px 20px 0" v-for="(item,index) in BookData" :key="index">
            <template slot="actions" class="ant-card-actions">
             <a-icon @click="pickOk(item.id)" :style="{color:pickColor}"  key="heart" type="heart"/>{{num}}
             <a-tag style="background-color: #97ffc8">{{item.cateName}}</a-tag>
            </template>
            <a-card-meta :title="item.name" :description="item.description">
              <a-avatar
                  style="width: 100px;height: 100px"
                  slot="avatar"
                  :src="item.cover"
              />
            </a-card-meta>
          </a-card>
        </div>
      </a-col>
      <a-col :span="4">
        <a-card hoverable style="width: 300px">
          <a-card-meta :title="'站长：'+userVo.nickName" description="
          前端很菜的一名在校大学生，如果对项目感兴趣的话请前往CSDN搜索🔍：派 大 星.
          项目也会放在Git上进行开源
                ">
            <a-avatar
                slot="avatar"
                :src="userVo.avatar"
            />
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import {getCates} from "../../../services/cates";
import {pickOk, searchBooks, totalPickOk} from "../../../services/books";
import {getUserById} from "../../../services/usercenter";

export default {
  name: "Search",
  data() {
    return {
      pickColor: '#000',
      dataSource: [],
      queryVo: {
        name: '',
        author: '',
        start: '',
        end: '',
        cateId:''
      },
      data: [],
      BookData:[],
      userVo: {
        avatar: '',
        nickName: ''
      },
      num: 0,
    }
  },
  created() {
    this.getAllCate()
    this.getAllBooks()
        const id = localStorage.getItem('id');
        getUserById(id).then(result => {
          this.userVo.avatar = result.data.data.avatar
          this.userVo.nickName = result.data.data.nickName
        })
  },
  methods: {
    getAllCate() {
      getCates().then(result => {
        this.data = result.data.data
      })
    },
    searchBook(id) {
      this.queryVo.cateId = id
      searchBooks(this.queryVo.name, this.queryVo.author, this.queryVo.start, this.queryVo.end,this.queryVo.cateId).then(result => {
        this.BookData = result.data.data.books
      })
    },
    getAllBooks() {
      searchBooks(this.queryVo.name, this.queryVo.author, this.queryVo.start, this.queryVo.end,this.queryVo.cateId).then(result => {
        this.BookData = result.data.data.books
      })
    },
    handleSubmit(){
      this.getAllBooks()
    },
    resetSearch(){
      this.queryVo.name = ''
      this.queryVo.author = ''
      this.queryVo.start = ''
      this.queryVo.end = ''
      this.queryVo.cateId = ''
      this.getAllBooks()
    },
    pickOk(id){
      pickOk(id).then(result=>{
        if (result.data.code === 0){
          this.$message.success(result.data.msg,3)
          this.pickColor = '#d41d1d'
          this.getAllBooks()
        }else {
          this.$message.error(result.data.data,3)
        }
        this.getTotal(id)
      })
    },
    getTotal(id){
      totalPickOk(id).then(result=>{
        alert(JSON.stringify(result))
        if (result.data.code === 0){
          this.num = result.data.data
        }
      })
    }
  },

}
</script>

<style scoped>
.num-posi{

}
</style>
